<template>
    <div :class="'tag ' + props.type">
      <slot></slot>
    </div>
  </template>
  
<script setup lang="ts">
import { TagType } from './type.ts'

defineOptions({
  name: 'TestTag'
})
const props = withDefaults(
  defineProps<{
    type?: TagType
  }>(),
  {
    type: TagType.PRIMARY
  }
)
</script>
  
 <style lang="scss" scoped>
 $primary-color: #409EFF;
 $success-color: #13ce66;
 $warning-color: #E6A23C;
 $danger-color: #F56C6C;
 $info-color: #909399;
.tag {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    background: #13ce66;
    color: #fff;

    &.primary {
      background-color: $primary-color;
    }

    &.success {
      background-color: $success-color;
    }

    &.warning {
      background-color: $warning-color;
    }

    &.danger {
      background-color: $danger-color;
    }

    &.info {
      background-color: $info-color;
    }
}
</style>
  